.remark_main_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto; /* 页面高度的80% */
    font-family: Arial, sans-serif;
    position: relative; /* 添加绝对定位 */
    top: 10px;
    margin: auto auto 20rem;
    width: 81%;
}

.remark_data_container {
    width: 100%;
    height: auto;
    max-width: 100%; /* 最大宽度为900px */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体感阴影 */
    position: relative;
    background-color: #f6f2d0; /* 蓝色背景 */
    margin-bottom: 10px;
}

.remark_title {
    margin-top: 2.5%;
    text-align: center;
    height: 15%;
    margin-bottom: 1.7%;
}

.remark_avatar_time {
    height: 7%;
    display: flex;
    align-items: center;
    margin-top: 1.31%;
    margin-bottom: 1.31%;
}

.remark_avatar_time span {
    font-size: 21px; /* 设置您希望的字体大小 */
    font-family: Arial, sans-serif;
    margin-right: 15px; /* 添加这一行 */
}

.author-avatar {
    margin-left: 1.7%;
    width: 43px;
    height: 43px; /* Set the exact size you need */
    cursor: pointer;
}

.remark_content_bottom {
    display: flex;
    height: auto;
    margin-top: 1.7%;
    min-height: 271px;
}

.remark_left {
    width: 17%;
    display: flex;
    flex-direction: column;
}

.remark_left_up {
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
    background-color: #dedbb9;
    max-height: 197px;
    min-height: 197px;
}

.ul_style {
    list-style-type: none; /* 移除列表项前面的默认标志符 */
    width: 100%;
    justify-content: center;
    padding: 0;
    flex-direction: column;
    align-items: center;
    height: auto; /* 页面高度的80% */
    font-family: Arial, sans-serif;
    margin: auto; /* 在页面中居中 */
    position: relative; /* 添加绝对定位 */
    top: 10px;
}

.ul_style li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px 5%;
}


.remark_fontSize {
    font-size: 30px; /* 设置字体大小为16像素，您可以根据需要调整这个值 */
}

.icon {
    width: 47px;
    height: 47px;
    cursor: pointer;
    border-radius: 50%;
}

.like_btn {
    cursor: pointer;
}

.unlike_btn {
    cursor: pointer;
}

.remark_left_down {
    height: 50%;
}

.remark_right {
    width: 80%;
    flex: 1;
    min-height: 20%; /* Minimum height for the content div */
    overflow: auto; /* Enable scrolling if content exceeds the height */
    padding: 0.2rem;
}

.remark_content_div {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    padding: 1em 1em;
    margin: 0.1em 0;
    font-size: 24px;
}



/*写评论区域*/
.write_remarks {
    width: 100%;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体感阴影 */
    position: relative;
    background-color: #f6f2d0; /* 蓝色背景 */
    margin-bottom: 10px;
}

.write_remark_avatar {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.write_remark_avatar img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
}

.write_areas {
    width: 90%;
    display: flex;
    flex-direction: column;
}

.comment_reply_form {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.file-comment {
    width: 100%;
    height: 97px;
    font-size: 16px;
    padding: 10px;
    border: none;
    resize: none;
    border-radius: 5px;
}

.remark_button_div {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.remark_button_div button {
    width: 24%;
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.remark_button_div button:hover {
    background-color: #0056b3;
}

/* 设置评论区容器样式 */
/* 父容器样式 */
.w_big_container {
    position: relative;
    height: 100%;
    border: 1px;
    width: 100%;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体感阴影 */
    background-color: #f6f2d0; /* 蓝色背景 */
    margin-bottom: 10px;
}

.remark_big_div {
    margin: 20px auto; /* 设置外边距，使其居中 */
    width: calc(100% - 40px); /* 设置评论区宽度 */
    max-width: 100%; /* 设置最大宽度 */
}

/* 设置单个评论样式 */
.w_container-big {
    display: flex; /* 使用弹性布局 */
    margin-bottom: 5px; /* 设置评论之间的间距 */
    background-color: #fff; /* 设置背景颜色 */
    border-radius: 8px; /* 设置圆角边框 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */

}

/* 设置头像样式 */
.w_avatar {
    width: 15%; /* 头像占据 w_container-big 的 15% 宽度 */
    flex-shrink: 0; /* 不缩小头像 */
    display: flex; /* 使用 Flexbox */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 设置头像图片样式 */
.w_avatar img {
    width: 97px; /* 图片最大宽度为容器宽度 */
    height: 97px; /* 图片最大高度为容器高度 */
    border-radius: 50%; /* 图片圆角化 */
}

/* 设置评论内容容器样式 */
.w_container {
    width: 85%; /* 评论内容占据 w_container-big 的 4/5 宽度 */
    padding: 15px; /* 设置内边距 */
    box-sizing: border-box; /* 盒模型设置为边框盒模型 */
    height: auto;
}

/* 设置评论行样式 */
.w_row {
    position: relative; /* 设置相对定位 */
    top: 5px; /* 初始位置为顶部 */
    width: 100%; /* 宽度占满父容器 */
    height: 35px; /* 占据 w_container 的 1/4 高度 */
    display: flex; /* 使用弹性布局 */
}

/* 设置盒子样式 */
.w_box {
    flex: 1; /* 自动分配宽度 */
    text-align: left; /* 文字居左 */
    width: 23.2%; /* 占据 w_row 的 80% 宽度 */
    cursor: pointer;
    height: 100px;
}

.remaek_like_btn {
    cursor: pointer;
}

.remaek_unlike_btn {
    cursor: pointer;
}


/* 设置空白占位元素样式 */
.w_empty_box {
    flex: 0 0 7.2%; /* 占据 w_row 的 20% 宽度，不伸缩，初始宽度为20% */
    height: 100px;
}

/* 设置内容样式 */
.w_content, .w_other_reply {
    width: 100%; /* 占据 w_container 的剩余 3/4 宽度的 1/2 */
    padding: 10px; /* 设置内边距 */
    box-sizing: border-box; /* 盒模型设置为边框盒模型 */
    height: auto;
}

.w_content p{
    width: 100%;
    text-align: left;
    padding: 10px;
    background-color: #f6f2d0; /* 设置背景颜色 */
}

/* 设置其他回复样式 */
.w_other_reply {
    background-color: #f9f9f9; /* 设置背景颜色 */
    margin-top: 5px; /* 设置上边距 */
}


.custom-hr {
  border: none;
  height: 1px;
  background-color: #000;
  background-image: linear-gradient(to right, #000, #fff, #000);
}


/* 回复区样式 */
.reply_big_div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    border-radius: 8px; /* 设置圆角边框 */
    margin-bottom: 5px;
}

.reply_div {
    display: flex;
    width: 100%;
    margin-bottom: 5px; /* 设置评论之间的间距 */
    background-color: #fff; /* 设置背景颜色 */
    border-radius: 8px; /* 设置圆角边框 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.reply_div_left {
    width: 15%;
    display: flex;
    text-align: center;
    align-items: center
}

.reply_div_left img {
    max-width: 100%;
    height: auto;
}

.reply_div_right {
    width: 85%;
    display: flex;
    flex-direction: column;
}

.reply_top_div {
    display: flex;
    align-items: center;
    height: 45px;
}

.reply_user {
    width: 25%;
    text-align: center;
    font-weight: bold;
}

.reply_time {
    width: 25%;
    text-align: center;
}

.reply_likes,
.reply_dislikes {
    width: 18%;
    text-align: center;
    cursor: pointer;
}

.reply_inside_div {
    width: 14%;
    text-align: center;
    cursor: pointer;
}

.reply_content {
    width: 100%;
    text-align: left;
    padding: 10px;
    background-color: #f6f2d0; /* 设置背景颜色 */
    margin-bottom: 5px;
    margin-right: 10px;
}

.reply_form_bottom_div {
    width: 100%;
}

.reply_form_inside {
    margin-top: 10px;
}

.reply_content_inside {
    width: 100%;
    resize: none;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.remark_button_div {
    width: 100%;
    text-align: right;
    margin-top: 10px;
}

.remark_reply_inside_btn {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #777;
    transition: all 0.3s ease;
}

.remark_reply_inside_btn:hover {
    background-color: #f5f5f5;
}

